<% if notice %>
<div class="w-full flex items-center justify-start p-4 bg-blue-500 text-white p-4 fixed top-0 left-0 info-notice">
  <i class="layui-icon layui-icon-notice" style="font-size: 1.5rem; color: #1E9FFF;"></i>


  <div class="flex-grow mx-1"><%= notice %></div>
  <div class="flex-shrink">
    <button class="ml-auto flex items-center justify-center" onclick="infoHide()"><i
        class="iconfont icon-close"></i></button>
  </div>
</div>

<% end %>


<%# content_for :script do -%>
<script type="text/javascript">
  function infoHide() {
    $('.info-notice').hide();
  }
  setTimeout(function () {
    infoHide();
  }, 3000);

  function notice_success(text) {
    $("body").append(`
          <div class="z-50 transform fixed bottom-0 right-0 h-auto w-96 p-4 animate__animated animate__fadeInRight notice">
            <div class="w-full flex items-center justify-start p-4 bg-green-500 text-white">
              <div class="flex-shrink">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="mr-2 stroke-current h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="flex-grow">
                <span>${text}</span>
              </div>
              <div class="flex-shrink" id="close">
                <button class="ml-auto flex items-center justify-center">
                  <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="stroke-current h-4 w-4 ml-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        `)
    setTimeout(function () {
      $('.notice').addClass('animate__fadeOutRight');
    }, 2000);
  }

  function notice_error(text) {
      $("body").append(`
          <div class="z-50 transform fixed bottom-0 right-0 h-auto w-96 p-4 animate__animated animate__fadeInRight notice">
            <div class="w-full flex items-center justify-start p-4 bg-red-500 text-white">
              <div class="flex-shrink">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="mr-2 stroke-current h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="flex-grow">
                <span>${text}</span>
              </div>
              <div class="flex-shrink" id="close">
                <button class="ml-auto flex items-center justify-center">
                  <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="stroke-current h-4 w-4 ml-2" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        `)
      setTimeout(function () {
          $('.notice').addClass('animate__fadeOutRight');
      }, 2000);
  }
</script>
<%# end -%>